<!-- src/components/CourseCard.vue -->
<template>
  <div class="course-card">
    <div class="rank-badge">{{ rank }}</div>
    <img :src="image" alt="课程封面">
    <div class="title">{{ title }}</div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  image: String,
  rank: Number
})
</script>

<style scoped>
.course-card {
  width: 200px;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: red;
  color: white;
  padding: 5px;
  border-radius: 3px;
}
</style>